import React, { Component } from "react";
// import { render } from "react-dom";
import SortableTree from "react-sortable-tree";
// import request from 'superagent';
import { restRequest as request } from "../../lib";

export default class FamilyTree extends Component {
  constructor(props) {
    super(props);

    this.state = {
      searchString: "",
      searchFocusIndex: 0,
      searchFoundCount: null,
      treeData: []
    };

    this.loadMembersFromServer = () => {
      var self = this;
      request({
        method: "GET",
        url: "members/descendant/1",
        success_fn: res => {
          if (res) {
            self.setState({ treeData: res });
          }
        },
        failure_fn: (err, errorResp) => {
          console.debug("error", err, errorResp);
        }
      });
    };

    this.handleCanDrop = param => {
      // debugger
    };
    this.handleGetNodeKey = param => {
      // debugger
    };
  }
  componentDidMount() {
    this.loadMembersFromServer();
  }
  render() {
    const getNodeKey = ({ treeIndex }) => treeIndex;

    const { searchString, searchFocusIndex, searchFoundCount } = this.state;

    // Case insensitive search of `node.title`
    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;

    const selectPrevMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
            : searchFoundCount - 1
      });

    const selectNextMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFocusIndex + 1) % searchFoundCount
            : 0
      });
    return (
      <div>
        <form
          style={{ display: "inline-block" }}
          onSubmit={event => {
            event.preventDefault();
          }}
        >
          <input
            id="find-box"
            type="text"
            placeholder="查找..."
            style={{ fontSize: "1rem" }}
            value={searchString}
            onChange={event =>
              this.setState({ searchString: event.target.value })
            }
          />

          <button
            type="button"
            disabled={!searchFoundCount}
            onClick={selectPrevMatch}
          >
            &lt;
          </button>

          <button
            type="submit"
            disabled={!searchFoundCount}
            onClick={selectNextMatch}
          >
            &gt;
          </button>

          <span>
            &nbsp;
            {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
            &nbsp;/&nbsp;
            {searchFoundCount || 0}
          </span>
        </form>

        <div style={{ height: 50000 }}>
          <SortableTree
            treeData={this.state.treeData}
            canDrag={false}
            onChange={treeData => this.setState({ treeData })}
            generateNodeProps={({ node, path }) => ({
              title: [
                <a
                  href={"/dashboard/family_member_detail?id=" + node.id}
                  target="_blank"
                >
                  {node.title}
                </a>,
                <span>/       </span>,
                <a
                  href={"/dashboard/family_member_detail?id=" + node.sid}
                  target="_blank"
                >
                  {node.stitle}
                </a>
              ]
            })}
            searchMethod={customSearchMethod}
            searchQuery={searchString}
            searchFocusOffset={searchFocusIndex}
            searchFinishCallback={matches =>
              this.setState({
                searchFoundCount: matches.length,
                searchFocusIndex:
                  matches.length > 0 ? searchFocusIndex % matches.length : 0
              })
            }
          />
        </div>
      </div>
    );
  }
}

// render(<App />, document.getElementById("root"));
